<template>
  <div class="container">
    <div class="items">
      <div class="item">
        <div class="item-left">头 像：</div>
        <div class="item-right">
          <div class="avatar">
            <img v-if="userInfo.account_pic" :src="userInfo.account_pic" />
            <div class="headimg-alt" v-else>上传</div>
          </div>
          <input
            type="file"
            id="upload-headimg"
            @change="handleHeadImgChange"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-left">账 户：</div>
        <div class="item-right">
          <yd-input v-model="userInfo.account" :max="20" disabled></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">昵 称：</div>
        <div class="item-right">
          <yd-input v-model="userInfo.account_name" :max="20"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">性 别：</div>
        <div class="item-right">
          <select v-model="userInfo.sex">
            <option :value="0">未知</option>
            <option :value="1">男</option>
            <option :value="2">女</option>
          </select>
        </div>
      </div>
      <div class="item">
        <div class="item-left">手 机：</div>
        <div class="item-right">
          <yd-input type="tel" v-model="userInfo.phone" :max="11"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">邮 箱：</div>
        <div class="item-right">
          <yd-input type="email" v-model="userInfo.email" :max="20"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">地 址：</div>
        <div class="item-right">
          <yd-input
            type="email"
            v-model="userInfo.address"
            :max="20"
          ></yd-input>
        </div>
      </div>
      <yd-button size="large" type="primary" @click.native="modify" class="btn">
        确 定
      </yd-button>
    </div>
  </div>
</template>
<script>
import { userApi, updateUserInfoApi } from '@/api';
export default {
  name: 'mineInfoDetail',
  data() {
    return {
      userInfo: {
        account: '',
        account_name: '',
        sex: 0,
        phone: '',
        email: '',
        address: '',
        account_pic: ''
      }
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const userData = localStorage.getItem('userData');
      const userId = userData && JSON.parse(userData).userId;
      userApi({
        account_id: 28
      }).then(res => {
        this.userInfo = res.data.user;
        console.log(res);
      });
    },
    modify() {
      const {
        account,
        account_name,
        sex,
        phone,
        email,
        address,
        account_pic
      } = this.userInfo;
      const hasError = (() => {
        switch (true) {
          case !account_name:
            return '昵称不能为空';
          case phone && !/^1[23456789]\d{9}$/g.test(phone):
            return '手机格式不正确';
          case email && !/^\w+@\w+\.(com|cn|org|net)$/g.test(email):
            return '邮箱格式不正确';
          default:
            return false;
        }
      })();
      if (hasError === false) {
        console.log(this.userInfo);
        const temp = { ...this.userInfo };
        temp.nickname = temp.account_name;
        delete temp.account_name;
        temp.password = '';
        temp.openid = '';
        updateUserInfoApi(temp).then(res => {
          if (res.success) {
            this.$dialog.toast({
              mes: '修改成功',
              type: 'success',
              timeout: 800
            });
            this.$router.back();
          } else {
            this.$dialog.toast({
              mes: res.msg,
              type: 'error',
              timeout: 800
            });
          }
        });
      } else {
        this.$dialog.toast({
          mes: hasError,
          type: 'error',
          timeout: 800
        });
      }
    },
    handleHeadImgChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = e => {
        let base64 = e.currentTarget.result;
        document.getElementById('upload-headimg').src = base64;
        this.userInfo.account_pic = base64;
      };
    }
  }
};
</script>
<style scoped lang="less">
.container {
  text-align: left;
}
.avatar {
  float: right;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.05rem solid #fff;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .headimg-alt {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    border-radius: 50%;
  }
}

.input-style {
  background: #fff;
  height: 0.8rem;
  padding: 0 0.15rem;
  border-radius: 0.14rem;
  margin: 0.35rem 0;
  font-size: 0.3rem;
}

.userInfo {
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.34rem;
}

.line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 0.2rem 0;
}

.wrapper {
  background-color: #eee;
  border-radius: 0.05rem;
  padding: 0.5rem;
}

/deep/ .yd-cell-item:after {
  margin: 0;
}

/deep/ .yd-cell-left {
  font-size: 0.3rem !important;
}
/deep/ .yd-cell-right {
  span,
  select {
    font-size: 0.32rem;
    letter-spacing: 0.02rem;
  }
}

.items {
  .item {
    display: flex;
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid #f2f2f2;
    background: white;
    align-items: center;
    font-size: 0.28rem;
    position: relative;
    .item-left {
      width: 1.5rem;
    }
    .item-right {
      flex: 1;
      text-align: right;
      position: relative;

      select,
      /deep/input {
        border: none;
        width: 100%;
        height: 100%;
        text-align: right;
        color: #2c3e50;
      }

      /deep/select {
        direction: rtl;
      }

      /deep/.yd-input-clear {
        display: none;
      }

      #upload-headimg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
  }
}

.btn {
  font-size: 0.3rem;
  font-weight: 500;
  // border-radius: 0.15rem;
  width: calc(100% - 0.3rem);
  margin: 0.15rem;
}
</style>
